<template>
  <div class="admin">
    <el-row class="line1" :gutter="40">
      <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
        <card-panel class="people" icon="peoples" iconColor="#40c9c6" iconHoverColor="#fff" text="New Visits" :num="1200" @click="onclicked_newVisitis"></card-panel>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
        <card-panel class="message" icon="message" iconColor="#40c9c6" iconHoverColor="#fff" text="Messages" :num="1200" @click="onclicked_messages"></card-panel>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
        <card-panel class="money" icon="money" iconColor="#40c9c6" iconHoverColor="#fff" text="Purchases" :num="1200" @click="onclicked_purchases"></card-panel>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
        <card-panel class="shoppingCard" icon="shoppingCard" iconColor="#40c9c6" iconHoverColor="#fff" text="Shoppings" :num="1200" @click="onclicked_shoppings"></card-panel>
      </el-col>
    </el-row>
    <el-row class="line2">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="chart">
          <line-chart :data="lineChartData"></line-chart>
        </div>
      </el-col>
    </el-row>
    <el-row class="line3" :gutter="40">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <radar-chart></radar-chart>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <pie-chart></pie-chart>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <bar-chart></bar-chart>
      </el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <transaction-table></transaction-table>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <todo-list></todo-list>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <card-box></card-box>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import cardPanel from './components/card-panel'
  import lineChart from './components/line-chart'
  import radarChart from './components/radar-chart'
  import pieChart from './components/pie-chart'
  import barChart from './components/bar-chart'
  import transactionTable from './components/transactionTable'
  import todoList from './components/todoList/index'
  import cardBox from './components/cardBox'
  const n = 10
  const lineChartData = {
    newVisitis: {
      x: (function () {
        let res = []
        for(let i = 0; i < n; i++){
          res.push(i * 0.05)
        }
        return res
      })(),
      expectedData: (function () {
        let res = []
        for(let i = 0; i < n; i++){
          res.push(Math.random() * 1000)
        }
        return res
      })(),
      actualData: (function () {
        let res = []
        for(let i = 0; i < n; i++){
          res.push(Math.random() * 1000)
        }
        return res
      })()
    },
    messages: {
      x: [0, 0.05, 0.10, 0.15, 0.20, 0.25, 0.30],
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      x: [0, 0.05, 0.10, 0.15, 0.20, 0.25, 0.30],
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      x: [0, 0.05, 0.10, 0.15, 0.20, 0.25, 0.30],
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }

  export default {
    components: { cardPanel, lineChart, radarChart, pieChart, barChart, transactionTable, todoList, cardBox },
    data () {
      return {
        lineChartData: lineChartData.newVisitis
      }
    },
    computed:{

    },
    methods: {
      onclicked_newVisitis(){
        this.lineChartData = lineChartData.newVisitis
      },
      onclicked_messages(){
        this.lineChartData = lineChartData.messages
      },
      onclicked_purchases(){
        this.lineChartData = lineChartData.purchases
      },
      onclicked_shoppings(){
        this.lineChartData = lineChartData.shoppings
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .admin{
    padding: 32px;
    background-color: #f0f2f5;
    min-height: 100%;

    .el-col {
      margin-bottom: 32px;
    }

    .line1 {
      .el-col {
        .people {
          /*/deep/ https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html*/
          & /deep/ .icon-wrapper {
            color: #40c9c6;
            background-color: #fff;

            &:hover {
              color: #fff;
              background-color: #40c9c6;
            }
          }
        }
        .message {
          /*/deep/ https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html*/
          & /deep/ .icon-wrapper {
            color: #36a3f7;
            background-color: #fff;

            &:hover {
              color: #fff;
              background-color: #36a3f7;
            }
          }
        }
        .money {
          /*/deep/ https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html*/
          & /deep/ .icon-wrapper {
            color: #f4516c;
            background-color: #fff;

            &:hover {
              color: #fff;
              background-color: #f4516c;
            }
          }
        }
        .shoppingCard {
          /*/deep/ https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html*/
          & /deep/ .icon-wrapper {
            color: #34bfa3;
            background-color: #fff;

            &:hover {
              color: #fff;
              background-color: #34bfa3;
            }
          }
        }
      }
    }
    .line2{
      .chart{
        background-color: #fff;
      }
    }
  }
</style>
